<template>
	<view class="content"> 
		<view class="ritem" v-for="(item,index) in info" :key="index"> 
		<view class="top">
			<view class="goodsInfo">
				<image :src="item.productPic" mode=""></image>
				<view class="right">
					<view class="name clamp2">
						{{item.productName}}
					</view>
					<view class="cate">
						{{getProductAttr(item.productAttr)}}
					</view>
					<view class="sbot">
						<view class="price">
							￥<text>{{item.productPrice}}</text>
						</view> 
						<view class="num">
							（共{{item.productQuantity}}件 
						</view>
					</view> 
				</view>  
			</view> 
			<view class="rate"> 
				<text>综合评价</text>
				<u-rate :count="count" v-model="item.star" size="24" activeColor="#020202"></u-rate>
			</view>
		</view> 
		<!-- <view class="addImg">
			<view class="img">
				<image src="/static/up.png" mode=""></image>
			</view>
			<view class="text">
				<text class="n1">添加照片</text>
				<text class="n2">（最多可上传9张)</text>
			</view>
		</view> -->
		 <u-upload
				:fileList="info[index].pics"
				@afterRead="afterRead($event,index)"
				@delete="deletePic($event,index)"
				:name="index"
				multiple
				:maxCount="9"
			>
		</u-upload> 
		<view class="bot">
			<textarea v-model="item.content" placeholder="请输入内容" ></textarea>
		</view> 
	</view>
	<!-- 	<view class="nm">
			 <u-checkbox-group
			 size="15" activeColor="#333"
				v-model="checkboxValue1" 
				@change="checkboxChange"
			>
				<u-checkbox label="匿名评价" name="匿名评价"></u-checkbox>
			</u-checkbox-group>
		</view> -->
		<button @click="handleSubmit">提交</button> 
	</view>
</template>

<script> 
	export default{
		data(){
			return{
				checkboxValue1:[],
				info:[],
				id:'', 
				count:5, 
				source:''
			}
		},
		onLoad(options) { 
			this.source = options.source
			this.info = JSON.parse(options.info)
			this.info.forEach(item=>{
				item.star = ''
				item.content = ''
				item.pics = []
			})
			this.id = options.id
		},
		methods:{
			
			getProductAttr(arr){
				return JSON.parse(arr).map(item=>item.value).join('_')
			},
			handleSubmit(){ 
				const filteredArr = this.info.map(obj => { 
				  const { content,star,pics,productId,orderId  } = obj;  
				  if(star == ''){
					  uni.showToast({
					  	title:"请选择评分",
					  	icon:"none"
					  })
					  return
				  }
				  if(content == ''){
					  uni.showToast({
						title:"请输入评价内容",
						icon:"none"
					  })
					  return
				  }
				  let newImg = []
				  obj.pics.forEach(item=>{
					  newImg.push(item.url)
				  })
				  return { orderId,productId, content,star,pics:newImg.join(',') };
				}); 
				this.$http({
					url:'/pmsComment/add',
					method:"post",
					data:filteredArr
				}).then(data=>{
					uni.showToast({
						title:"提交成功",
						icon:"none"
					})
					let pages = getCurrentPages()
					let prePages = pages[pages.length - 2].$vm
					if(this.source == 'detail'){
						prePages.getOrderInfo()
					}else if(this.source == 'list'){
						prePages.page = 1 
						prePages.getList()
					}
					setTimeout(()=> {
						uni.navigateBack({
							delta: 1
						});
					},1000)
				})
			},
			// 删除图片
			deletePic(event,index) {
				this.info[index].pics.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event,index) { 
				let lists = [].concat(event.file) 
				let fileListLen = this.info[index].pics.length
				lists.map((item) => {
					this.info[index].pics.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				}) 
				this.$forceUpdate()
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.info[index].pics[fileListLen]
					this.info[index].pics.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.$forceUpdate()
			},
			 uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: "https://le.bjxlu.com/minio/upload", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					header:{
						Authorization: uni.getStorageSync('token')
					},
					success: (res) => {
						console.log('res.data',res.data)
						const result = JSON.parse(res.data)
						console.log('result.data',result.data.url)
					  setTimeout(() => {
						resolve(result.data.url);
					  }, 1000);
					},
				  });
				});
			  },
			// uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => { 
			// 		uni.getImageInfo({
			// 			src: url,
			// 			success: (imageInfo) => {
			// 				var imgType = imageInfo.type
			// 				uni.getFileSystemManager().readFile({
			// 					filePath: url, //选择图片返回的相对路径
			// 					encoding: "base64", //这个是很重要的
			// 					success:async res => { //成功的回调
			// 						//返回base64格式 
			// 						let upimg = 'data:image/' + imgType + ';base64,' + res.data  
			// 						const url =  await this.getupimg(upimg) 
			// 						resolve(url)
			// 					},
			// 					fail: err => { 
			// 					}
			// 				})
			// 			}
			// 		})
			// 	})
			// },
					
			// getupimg(img) {
			// 	return new Promise((resolve, reject) => {
			// 		this.$http({
			// 			url:  '/minio/upload',
			// 			method:'post',
			// 			data:{
			// 				file: img
			// 			}
			// 		}).then(data=>{ 
			// 			resolve(data.url)  
			// 		})
			// 	})
				
			// },
		}
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	 .content{
		 padding: 30rpx;
		 .nm{
			 margin-top: 30rpx;
		 }
		 button{
			 width: 100%;
			 height: 88rpx;
			 background: #020202;
			 border-radius: 50rpx;
			 color: #fff;
			 margin-top: 160rpx;
			 font-size: 28rpx;
		 }
		 .bot{
			 background: #fff;
			 margin-top: 30rpx;
			 padding: 24rpx;
			 font-size: 28rpx;
		 }
		 .addImg{
			 background: #fff;
			 padding: 30rpx;
			 box-sizing: border-box;
			 margin-top: 30rpx;
			 .img{
				 image{
					 width: 62rpx;
					 height: 62rpx;
					 display: block;
					 margin: 0 auto;
				 }
			 }
			 .text{
				 margin-top: 23rpx;
				 text-align: center;
				.n1{
					font-size: 28rpx;
					color: #020202;
					font-weight: bold;
				}
				.n2{
					font-size: 24rpx;
					color: #999999;
				}
			 }
		 }
		 .top{
			 background: #fff;
			 padding: 24rpx;
			 box-sizing: border-box;
			 .rate{
				 display: flex;
				 align-items: center;
				 text{
					 font-size: 28rpx;
					 color: #020202;
					 font-weight: bold;
					 margin-right: 20rpx;
				 }
			 }
			 .goodsInfo{
			 	display: flex;
			 	padding-bottom: 30rpx;
			 	margin-bottom: 30rpx;
			 	border-bottom: 1px solid #f2f2f2;
			 	image{
			 		width: 180rpx;
			 		height: 180rpx;
			 		border-radius: 20rpx;
			 	}
			 	.right{
			 		display: flex;
			 		flex-direction: column;
			 		flex: 1;
			 		margin-left: 30rpx;
			 		.name{
			 			font-size: 30rpx;
			 			color: #333;
			 			font-weight: bold;
			 		}
			 		.cate{
			 			font-size: 24rpx;
			 			color: #999999;
			 			margin-top: 10rpx;
			 		}
			 		.sbot{
			 			margin-top: auto;
			 			display: flex;
			 			align-items: center;
			 			.price{
			 				font-size: 30rpx;
			 				color: #333333; 
			 			} 
			 			.num{
			 				font-size: 24rpx;
			 				color: #999999;
			 			}
			 		}
			 	}		 
			 }
		 }
	 }
</style>